<template>
	<div class="login-page">
		<div class="login-content">
			<div class="login-logo">
				<img src="../../assets/login/login-logo.png" alt="" />
			</div>
			<div class="login-title">
				<img src="../../assets/login/login-title.png" alt="" />
			</div>
			<div class="login-box">
				<div class="head">
					<div class="head-text" @click="islogin = 1">
						账号登录
					</div>
					<div class="line"></div>
					<div class="head-text" @click="islogin = 2">
						扫码登录
					</div>
				</div>
				<div v-if="islogin == 1">
					<div class="entry">
						<div class="entry-item">
							<img src="../../assets/login/num.png" alt="" />
							<el-input v-model="account" style="width: 220px" placeholder="请输入账号" />
						</div>
						<div class="entry-item">
							<img src="../../assets/login/password.png" alt="" />
							<el-input type="password" v-model="password" style="width: 220px" placeholder="请输入密码" />
						</div>
					</div>
					<div class="remember">
						<el-checkbox class="custom-label" v-model="remember" label="记住登录" />
					</div>
					<div class="register">
						<div>账号注册</div>
						<div class="agreement">
							<el-checkbox class="custom-label" v-model="agreement" label="同意《用户注册协议》" />
						</div>
						<div>忘记密码？</div>
					</div>
				</div>
				<div class="qr-box"  v-if="islogin == 2">
					<div class="qr">
						
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	const account = ref('')
	const password = ref('')
	const islogin = ref('1')
	const remember = ref(false)
	const agreement = ref(false)
</script>
<style>
	.el-input__wrapper {
		border-radius: 20px;
	}

	input::-webkit-input-placeholder {
		font-size: 11px;
	}

	.custom-label {
		color: #fff;
	}

	.custom-label .el-checkbox__label {
		font-size: 10px;
	}

	/deep/ (.el-checkbox__input.is-checked + .el-checkbox__label) {
		color: red;
		/* 更改为你想要的颜色 */
	}
</style>
<style scoped lang="scss">
	.login-page {
		width: 100%;
		height: 100vh;
		background-image: url('../../assets/login/login-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;

		.login-content {
			position: absolute;
			top: 90px;
			right: 70px;

			.login-logo {
				text-align: right;

				img {
					width: 180px;
					height: 70px;
				}
			}

			.login-title {
				margin-top: 10px;

				img {
					width: 1030px;
					height: 180px;
				}
			}

			.login-box {
				width: 400px;
				height: 300px;
				padding: 30px;
				border-radius: 30px;
				background-color: #1b82e2;
				margin: 25px 0 0 330px;

				.head {
					display: flex;
					justify-content: center;

					.head-text {
						font-size: 18px;
						color: #fff;
					}

					.line {
						background-color: #fff;
						width: 1px;
						height: 25px;
						margin: 0 10px;
					}
				}

				.entry {
					margin-top: 30px;

					.entry-item {
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 10px;

						img {
							width: 35px;
							height: 35px;
							margin-right: 15px;
						}
					}
				}

				.remember {
					margin-left: 90px;
				}

				.register {
					display: flex;
					justify-content: space-around;
					align-items: center;
					font-size: 10px;
					padding: 30px;
					color: #fff;

					.agreement {
						padding: 0 10px;
					}
				}
				.qr-box {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 30px;
					.qr {
						width: 150px;
						height: 150px;
						background-color: #fff;
					}
				}
			}
		}
	}
</style>